tutorial project [Front-end🦁] #12 Flex Project 웹폰트로도 많이 사용한다. flex 복습 기본 속성들에 대해서 복습했다. margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다. flex-start, stretch의 다른 점 : 전자는 element의 높이를 살려서 가고, stretch는 container에 맞춰서 늘려줌. menu 메뉴를 눌렀을 때, sub-메뉴가 나오는 형태의 layout을 함께 개발했다. PC 환경에서... frontCSStutorial projecthtmlCSS [Front-end] #7.5 tablet layout / 반응형 web 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 태블릿 클론 1 나는 처음에 nav li 사이즈를 12.5%로 줄여서 모든 버튼이 width가 줄어도 화면에 나타나도록 구현했었는데, 화면 크기가 작은 탭으로 접속한다면 버튼이 너무 답답할 수 있다는 문제가 있다. ... frontCSStutorial projecthtmlCSS [Front-end] #6.5 Web Clone, Font / Smartphone layout initial-scale - 초기 확대 비율 스마트폰 레이아웃의 경우 화면 사이즈가 작기 때문에 대부분 수직 구조 스마트폰 클론 1 나는 깃헙을 이용해서 확인해보았다. 스마트폰 클론 2 1번 클론이랑 난이도가 비슷할거라고 예상했는데, 처음에 사진에 여백을 더 주고 했더니 그 여백 조정하는 거랑, 검색창 너비 구현, 그리고 텍스트 잘리도록 조정하는게 생각보다 힘들었다. 나는 display: f... frontCSStutorial projecthtmlCSS [Front-end🦁] #9 Media Query (+ z-index, CSS stacking order) 에 카드 뒤집기도 정리해 두었다. 이런 코드인데, 파란색 배경의 div에 가상 요소(::before, ::after)로 자식을 만들어서 x축 방향, y축 방향으로 90도 돌려서 안보이게 처리해둔 뒤, hover일 때 90도를 다시 돌려서 마치 가운데서부터 십자로 나타나는 효과를 준 것이다. z-index 이 코드에서 hover 상태일 때 div:hover의 z-index가 1이라 글씨 col... frontCSSprojecttutorial projecthtmlCSS [Front-end🦁] #11 1만 시간의 법칙 + 반응형 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 컴퓨터 화면에 맞춰서 디자인 요소들 픽셀에 정확히 맞추고, @media 태그를 이용해서 max-width: 360px 에 맞춘 반응형 페이지를 손보았다. 오늘 수업까지 듣고 디자인을 픽셀 단위로 맞추는 것까지는 실무의 범위인 것 같아서 제외하고, 더 반응형으로 만들어보려고... frontCSSprojecttutorial projecthtmlCSS
[Front-end🦁] #12 Flex Project 웹폰트로도 많이 사용한다. flex 복습 기본 속성들에 대해서 복습했다. margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다. flex-start, stretch의 다른 점 : 전자는 element의 높이를 살려서 가고, stretch는 container에 맞춰서 늘려줌. menu 메뉴를 눌렀을 때, sub-메뉴가 나오는 형태의 layout을 함께 개발했다. PC 환경에서... frontCSStutorial projecthtmlCSS [Front-end] #7.5 tablet layout / 반응형 web 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 태블릿 클론 1 나는 처음에 nav li 사이즈를 12.5%로 줄여서 모든 버튼이 width가 줄어도 화면에 나타나도록 구현했었는데, 화면 크기가 작은 탭으로 접속한다면 버튼이 너무 답답할 수 있다는 문제가 있다. ... frontCSStutorial projecthtmlCSS [Front-end] #6.5 Web Clone, Font / Smartphone layout initial-scale - 초기 확대 비율 스마트폰 레이아웃의 경우 화면 사이즈가 작기 때문에 대부분 수직 구조 스마트폰 클론 1 나는 깃헙을 이용해서 확인해보았다. 스마트폰 클론 2 1번 클론이랑 난이도가 비슷할거라고 예상했는데, 처음에 사진에 여백을 더 주고 했더니 그 여백 조정하는 거랑, 검색창 너비 구현, 그리고 텍스트 잘리도록 조정하는게 생각보다 힘들었다. 나는 display: f... frontCSStutorial projecthtmlCSS [Front-end🦁] #9 Media Query (+ z-index, CSS stacking order) 에 카드 뒤집기도 정리해 두었다. 이런 코드인데, 파란색 배경의 div에 가상 요소(::before, ::after)로 자식을 만들어서 x축 방향, y축 방향으로 90도 돌려서 안보이게 처리해둔 뒤, hover일 때 90도를 다시 돌려서 마치 가운데서부터 십자로 나타나는 효과를 준 것이다. z-index 이 코드에서 hover 상태일 때 div:hover의 z-index가 1이라 글씨 col... frontCSSprojecttutorial projecthtmlCSS [Front-end🦁] #11 1만 시간의 법칙 + 반응형 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 컴퓨터 화면에 맞춰서 디자인 요소들 픽셀에 정확히 맞추고, @media 태그를 이용해서 max-width: 360px 에 맞춘 반응형 페이지를 손보았다. 오늘 수업까지 듣고 디자인을 픽셀 단위로 맞추는 것까지는 실무의 범위인 것 같아서 제외하고, 더 반응형으로 만들어보려고... frontCSSprojecttutorial projecthtmlCSS